<!-- 自定义下拉刷新与上拉加载演示(vue) -->
<template>
	<view class="content-list">
    <cu-head headTitle="呼叫送患者" :opcityTop='opcityTop'></cu-head>
		<z-paging ref="paging" v-model="dataList" @query="queryList" @scroll='aaa'>
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
			<!-- <template #top>
				<cu-head headTitle="呼叫送患者"></cu-head>
			</template> -->
			<!-- 自定义下拉刷新view(如果use-custom-refresher为true且不设置下面的slot="refresher"，此时不用获取refresherStatus，会自动使用z-paging自带的下拉刷新view) -->

			<!-- 注意注意注意！！字节跳动小程序中自定义下拉刷新不支持slot-scope，将导致custom-refresher无法显示 -->
			<!-- 如果是字节跳动小程序，请参照sticky-demo.vue中的写法，此处使用slot-scope是为了减少data中无关变量声明，降低依赖 -->
			<template #refresher="{refresherStatus}">
				<!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
				<custom-refresher :status="refresherStatus" />
			</template>
			<!-- 自定义没有更多数据view -->
			<template #loadingMoreNoMore>
				<!-- 此处的custom-nomore为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，没有更多数据就显示什么view -->
				<custom-nomore />
			</template>

			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="item-box" v-for="(item,index) in dataList" :key="index">
				<view class="item-title">{{item.name}}</view>
        <view class="item-des">
          <view class="item-des-inner">患者姓名：{{ item.patientName }}</view>
          <view class="item-des-inner">性别：{{ item.sex }}</view>
          <view class="item-des-inner">年龄：{{ item.age }}</view>
          <view class="item-des-inner">床号：{{ item.bedNum }}</view>
          <view class="item-des-inner">科室：{{ item.sectionName }}</view>
          <view class="item-des-inner">住院号：{{ item.admissionNum }}</view>
        </view>
        <view class="item-des-btn">
          <nut-button plain type="primary">
            <view style="display: flex; align-items: center;">
              呼叫患者
              <nut-icon font-class-name="iconfont" class-prefix="icon" name="lingsheng" custom-color="#f32384" size="18px" class="nut-icon-am-blink nut-icon-am-infinite"/>
            </view>
          </nut-button>
        </view>
				<view class="item-line"></view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>

	import { ref } from 'vue';
	// import request from '/http/request.js';

  const opcityTop = ref(0);
  const paging = ref(null);
	// 定义 refresherStatus 为响应式属性
	const refresherStatus = ref('default');
	const tabIndex = ref(0);
	const tabList = ref(['测试1','测试2','测试3','测试4']);
	// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
    const dataList = ref(['测试1','测试2','测试3','测试4']);


	const tabsChange = (index) => {
		tabIndex.value = index;
		// 当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
		paging.value.reload();
	}

	// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
	const queryList = (pageNo, pageSize) => {
	// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
	// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
	// 模拟请求服务器获取分页数据，请替换成自己的网络请求
	const params = {
		pageNo: pageNo,
		pageSize: pageSize,
		type: tabIndex.value + 1
	}
	setTimeout(() => {
		paging.value.complete([
      {
        name: '手术间13',
        patientName: '王白柴',
        age: 18,
        sex: '男',
        bedNum: 1,
        sectionName: '内科',
        admissionNum: 20051314,
      },
      {
        name: '手术间13',
        patientName: '王白柴',
        age: 18,
        sex: '男',
        bedNum: 1,
        sectionName: '内科',
        admissionNum: 20051314,
      },
      {
        name: '手术间13',
        patientName: '王白柴',
        age: 18,
        sex: '男',
        bedNum: 1,
        sectionName: '内科',
        admissionNum: 20051314,
      },
      {
        name: '手术间13',
        patientName: '王白柴',
        age: 18,
        sex: '男',
        bedNum: 1,
        sectionName: '内科',
        admissionNum: 20051314,
      },
      {
        name: '手术间13',
        patientName: '王白柴',
        age: 18,
        sex: '男',
        bedNum: 1,
        sectionName: '内科',
        admissionNum: 20051314,
      },
      {
        name: '手术间13',
        patientName: '王白柴',
        age: 18,
        sex: '男',
        bedNum: 1,
        sectionName: '内科',
        admissionNum: 20051314,
      },
      {
        name: '手术间13',
        patientName: '王白柴',
        age: 18,
        sex: '男',
        bedNum: 1,
        sectionName: '内科',
        admissionNum: 20051314,
      },
      {
        name: '手术间13',
        patientName: '王白柴',
        age: 18,
        sex: '男',
        bedNum: 1,
        sectionName: '内科',
        admissionNum: 20051314,
      },
      {
        name: '手术间13',
        patientName: '王白柴',
        age: 18,
        sex: '男',
        bedNum: 1,
        sectionName: '内科',
        admissionNum: 20051314,
      },
      {
        name: '手术间13',
        patientName: '王白柴',
        age: 18,
        sex: '男',
        bedNum: 1,
        sectionName: '内科',
        admissionNum: 20051314,
      }
    ]);
	}, 100);
	return
	request.queryList(params).then(res => {
		// 将请求的结果数组传递给z-paging
		paging.value.complete(res.data.list);
	}).catch(res => {
		// 如果请求失败写paging.value.complete(false);
		// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
		// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
		paging.value.complete(false);
	})
	}

  const aaa = (e) => {
    opcityTop.value = e.detail.scrollTop / 100 > 1 ? 1 : e.detail.scrollTop / 100;
  }

</script>

<style lang='scss'>
  .content-list{
    width: 100vw;
    box-sizing: content-box;
    background: linear-gradient(180deg, #f7f7f7, #f7f7f7,#f3238410, #f3238420);;
    height: 100vh;
  }
	.item-box {
		position: relative;
		margin: 10px;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
	}
  .item-title {
    font-size: 20px;
    color: #333;
    font-weight: bold;
    text-align: center;
    width: 100%;
  }
  .item-des{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    font-size: 16px;
    padding: 10px 0;
    .item-des-inner{
      padding-right: 20px;
    }
  }
  .item-des-btn{
    width: 100%;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
	.item-line {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		height: 1px;
		width: 100%;
		background-color: #eeeeee;
	}
  .content-list .z-paging-content-fixed{
    top: 44px !important;
  }
</style>